<template>
	<view>
		<view class="page-foot"><view class="g-btn1" @click="forumSubmit">提交</view></view>
		<view class="container plr30">
			<view class="fs34 col-black mb30">反馈意见</view>
			<view class="feedback-box">
				<textarea class="textarea mb20 fs24" v-model="content"  placeholder="你的每一个反馈对我们都很重要（篇幅请控制在200字内）" placeholder-style="color:var(--placeholder);"></textarea>
				<view class="upload-list flex flex-align-start flex-wrap">
					<view class="item" v-for="(item,index) in images">
						<image class="img1" :src="item" mode="aspectFill"></image>
						<image @click="deleteChooseImage(index)" class="icon-close" src="/static/icon/icon_cancle.png" mode="aspectFit"></image>
					</view>
					<image class="item" v-if="images.length<9" src="/static/icon/icon_btn_add2.png" @click="chooseImage()" mode="aspectFill"></image>
				</view>
			</view>
			<view class="pb25 m-hairline--bottom mb45">
				<view class="fs24 col-9 mb35">请填写您的联系方式，以便我们及时回复</view>
				<input class="fs32 col-3" v-model="mobile" type="text" placeholder="请填写您的联系方式" placeholder-class="col-9" />
			</view>
			<view class="col-black fs36 mb35">反馈类型</view>
			<view class="type-list flex flex-align-start flex-wrap"><view :class="{active: feedbackIndex == index}" @click="changeType(index)" class="item" v-for="(item,index) in feedbackLists">{{item.name}}</view></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			feedbackLists:[],
			feedbackIndex:0,
			content:'',
			mobile:'',
			images:[],
		};
	},
	onLoad(){
		this.fetchFeedbackType();
	},
	methods: {
		fetchFeedbackType(){
			this.$core.get({url:'xiluedu.feedback/feedback_reasons',data:{},success:(ret)=>{
				 this.feedbackLists = ret.data;
			},loading:false});
		},
		changeType(idx){
			this.feedbackIndex = idx;
		},
		forumSubmit(){
			let content = this.content.trim();
			let images = this.images;
			let contact = this.mobile;
			let feedbackIndex = this.feedbackIndex;
			let reason = this.feedbackLists[feedbackIndex].name;
			if(content == ''){
				uni.showToast({title: '反馈内容不得为空',icon:'none'});
				return false;
			}else if(contact == ''){
				uni.showToast({title: '联系电话不得为空',icon:'none'});
				return false;
			}
			this.$core.post({url:'xiluedu.feedback/feedback',data:{content:content,images:images,contact:contact,reason:reason},success:(ret)=>{
				 uni.showToast({
				 	title: ret.msg,
					icon:'none'
				 });
				 setTimeout(function(){
					 uni.navigateBack({
					 	delta:1
					 })
				 },1500)
			}});
		},
		// 选择图片
		chooseImage() {
			let that = this;
			uni.chooseImage({
				count: 9-that.images.length,
				success: res => {
					let files = res.tempFiles;
					files.map(item => {
						that.$core.uploadFile({
							filePath: item.path,
							success: (ret, response) => {
								that.images.push(ret.data.url);
							}
						});
					});
				}
			});
		},
		// 删除选择的图片
		deleteChooseImage(idx) {
			let data = this.images;
			data.splice(idx, 1);
			this.images = data;
		},
	}
};
</script>

<style scoped>
.container {
	padding-top: 50rpx;
}
.page-foot {
	padding: 0 30rpx 30rpx;
	background-color: #fff;
}
.feedback-box {
	margin: 0 0 70rpx;
	padding: 30rpx 20rpx 15rpx;
	background: #ffffff;
	box-shadow: 0 1rpx 18rpx 0 rgba(0, 0, 0, 0.06);
	border-radius: 10rpx;
}
.feedback-box .textarea {
	width: 100%;
	height: 220rpx;
}
.upload-list .item {
	position: relative;
	margin: 0 15rpx 15rpx 0;
	display: block;
	width: 94rpx;
	height: 94rpx;
}
.upload-list .item .img1{
	display: block;
	width: 94rpx;
	height: 94rpx;
}

.upload-list .icon-close{
	position: absolute;
	right: -10rpx;
	top: -10rpx;
	display: block;
	width: 30rpx;
	height: 30rpx;
	z-index: 1;
}

.type-list .item {
	margin: 0 35rpx 25rpx 0;
	padding: 15rpx 30rpx;
	background: #f4f4f4;
	border-radius: 29rpx;
	font-size: 24rpx;
	color: #666666;
	line-height: 26rpx;
}
.type-list .item.active{
	background: var(--bg1);
	color: var(--white);
}
</style>
